<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>东陬社区楼栋分布图</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            padding: 10px;
        }
        
        .container {
            max-width: 100%;
            margin: 0 auto;
            background-color: white;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        
        h1 {
            text-align: center;
            margin-bottom: 15px;
            color: #333;
            font-size: 1.5rem;
        }
        
        .map-container {
            position: relative;
            min-height: 500px;
            margin: 15px 0;
            background-color: #e8f5e9;
            border: 2px solid #81c784;
            border-radius: 5px;
            padding: 15px;
            overflow-x: auto;
        }
        
        .row {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
            min-height: 100px;
            flex-wrap: wrap;
        }
        
        .row.reverse {
            flex-direction: row-reverse;
        }
        
        .building {
            width: 70px;
            margin: 5px;
            cursor: pointer;
            position: relative;
            display: flex;
            flex-direction: column-reverse;
            align-items: center;
            transition: transform 0.2s;
        }
        
        .building:hover {
            transform: translateY(-3px);
        }
        
        .building-shape {
            width: 50px;
            border-radius: 4px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-weight: bold;
            position: relative;
            font-size: 0.8rem;
            margin-top: 5px;
        }
        
        .building-11 {
            height: 110px;
            background-color: #90caf9;
        }
        
        .building-15 {
            height: 150px;
            background-color: #a5d6a7;
        }
        
        .building-17 {
            height: 170px;
            background-color: #ffcc80;
        }
        
        .building-number {
            font-weight: bold;
            background-color: white;
            padding: 2px 6px;
            border-radius: 10px;
            border: 1px solid #ddd;
            font-size: 0.9rem;
            margin-bottom: 5px;
            text-align: center;
            width: 100%;
        }
        
        .info-panel {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 0 15px rgba(0,0,0,0.2);
            z-index: 100;
            display: none;
            max-width: 90%;
            width: 350px;
        }
        
        .info-panel h3 {
            margin-bottom: 10px;
            color: #4285f4;
            border-bottom: 1px solid #eee;
            padding-bottom: 5px;
            font-size: 1.1rem;
        }
        
        .close-btn {
            position: absolute;
            top: 8px;
            right: 8px;
            cursor: pointer;
            font-size: 16px;
            color: #888;
        }
        
        .close-btn:hover {
            color: #333;
        }
        
        .legend {
            display: flex;
            justify-content: center;
            margin: 15px 0;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .legend-item {
            display: flex;
            align-items: center;
            margin: 0 5px;
            font-size: 0.9rem;
        }
        
        .legend-color {
            width: 16px;
            height: 16px;
            border-radius: 3px;
            margin-right: 5px;
        }
        
        @media (max-width: 480px) {
            .building {
                width: 60px;
                margin: 3px;
            }
            
            .building-shape {
                width: 45px;
                font-size: 0.7rem;
            }
            
            .building-number {
                font-size: 0.8rem;
            }
            
            .info-panel {
                width: 300px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>东陬社区楼栋分布图</h1>
        
        <div class="legend">
            <div class="legend-item">
                <div class="legend-color" style="background-color: #ffcc80;"></div>
                <span>17层楼栋</span>
            </div>
            <div class="legend-item">
                <div class="legend-color" style="background-color: #a5d6a7;"></div>
                <span>15层楼栋</span>
            </div>
            <div class="legend-item">
                <div class="legend-color" style="background-color: #90caf9;"></div>
                <span>11层楼栋</span>
            </div>
        </div>
        
        <div class="map-container" id="map">
            <!-- 第一排 -->
            <div class="row" id="row1">
                <div class="building" data-floors="11" data-number="14">
                    <div class="building-number">14号楼</div>
                    <div class="building-shape building-11">11层</div>
                </div>
                <div class="building" data-floors="11" data-number="13">
                    <div class="building-number">13号楼</div>
                    <div class="building-shape building-11">11层</div>
                </div>
                <div class="building" data-floors="11" data-number="12">
                    <div class="building-number">12号楼</div>
                    <div class="building-shape building-11">11层</div>
                </div>
                <div class="building" data-floors="11" data-number="11">
                    <div class="building-number">11号楼</div>
                    <div class="building-shape building-11">11层</div>
                </div>
            </div>
            
            <!-- 第二排 -->
            <div class="row reverse" id="row2">
                <div class="building" data-floors="17" data-number="7">
                    <div class="building-number">7号楼</div>
                    <div class="building-shape building-17">17层</div>
                </div>
                <div class="building" data-floors="11" data-number="8">
                    <div class="building-number">8号楼</div>
                    <div class="building-shape building-11">11层</div>
                </div>
                <div class="building" data-floors="11" data-number="9">
                    <div class="building-number">9号楼</div>
                    <div class="building-shape building-11">11层</div>
                </div>
                <div class="building" data-floors="15" data-number="10">
                    <div class="building-number">10号楼</div>
                    <div class="building-shape building-15">15层</div>
                </div>
            </div>
            
            <!-- 第三排 -->
            <div class="row reverse" id="row3">
                <div class="building" data-floors="15" data-number="5">
                    <div class="building-number">5号楼</div>
                    <div class="building-shape building-15">15层</div>
                </div>
                <div class="building" data-floors="15" data-number="6">
                    <div class="building-number">6号楼</div>
                    <div class="building-shape building-15">15层</div>
                </div>
            </div>
            
            <!-- 第四排 -->
            <div class="row reverse" id="row4">
                <div class="building" data-floors="17" data-number="3">
                    <div class="building-number">3号楼</div>
                    <div class="building-shape building-17">17层</div>
                </div>
                <div class="building" data-floors="17" data-number="4">
                    <div class="building-number">4号楼</div>
                    <div class="building-shape building-17">17层</div>
                </div>
            </div>
            
            <!-- 第五排 -->
            <div class="row reverse" id="row5">
                <div class="building" data-floors="17" data-number="1">
                    <div class="building-number">1号楼</div>
                    <div class="building-shape building-17">17层</div>
                </div>
                <div class="building" data-floors="17" data-number="2">
                    <div class="building-number">2号楼</div>
                    <div class="building-shape building-17">17层</div>
                </div>
            </div>
        </div>
        
        <div class="info-panel" id="infoPanel">
            <span class="close-btn" id="closeBtn">×</span>
            <h3 id="panelTitle">楼栋信息</h3>
            <div id="panelContent">
                <p id="buildingInfo"></p>
            </div>
        </div>
    </div>
    
    <script>
        // 点击楼形跳转到业主信息登记表
        document.querySelectorAll('.building-shape').forEach(shape => {
            shape.addEventListener('click', function() {
                window.location.href = "https://docs.qq.com/sheet/DWFNGWGJIWVp6aFhI";
            });
        });
        
        // 点击楼号显示楼栋信息
        document.querySelectorAll('.building-number').forEach(number => {
            number.addEventListener('click', function() {
                const building = this.parentElement;
                const panel = document.getElementById('infoPanel');
                const title = document.getElementById('panelTitle');
                const content = document.getElementById('buildingInfo');
                
                title.textContent = `${this.textContent}信息`;
                content.textContent = `该楼栋共有${building.dataset.floors}层，属于${getBuildingType(building.dataset.floors)}。`;
                
                panel.style.display = 'block';
            });
        });
        
        // 关闭信息面板
        document.getElementById('closeBtn').addEventListener('click', function() {
            document.getElementById('infoPanel').style.display = 'none';
        });
        
        // 辅助函数
        function getBuildingType(floors) {
            return floors === '11' ? '11层楼栋' : floors === '15' ? '15层楼栋' : '17层楼栋';
        }
    </script>
</body>
</html>